/**
 * 切换全屏事件的 hooks - useFullScreen.ts
 */
import { ref, onMounted, onBeforeUnmount } from 'vue';

export const useFullScreen = () => {

  const isFullScreen = ref(false)

  // 切换全屏
  const toggleFullScreen = () => {
    if (!document.fullscreenElement) {
      // 进入全屏
      document.documentElement
        .requestFullscreen()
        .then(() => (isFullScreen.value = true))
        .catch((err) => console.error('无法全屏：', err))
    } else {
      // 退出全屏
      document.exitFullscreen().then(() => (isFullScreen.value = false))
    }
  }

  // 监听与移除全屏事件
  onMounted(() => {
    document.addEventListener('fullscreenchange', onFullScreenChange)
  })
  onBeforeUnmount(() => {
    document.removeEventListener('fullscreenchange', onFullScreenChange)
  })

  // 监听全屏变化（比如按 ESC 退出时）
  const onFullScreenChange = () => {
    isFullScreen.value = !!document.fullscreenElement
  }

  return {
    isFullScreen,
    toggleFullScreen
  }
}